<editor [inline]="true" [disabled]="true"
    [ngModel]="content()"
    (onChange)="onchange($event)"
    [init]="{
        plugins: [
            'advlist autolink link image lists charmap preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking',
            'table emoticons template paste'
        ],
        toolbar:
            'undo redo | styleselect | fontselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | preview media fullpage | ' +
            'forecolor backcolor emoticons',
        menu: {
            favs: { title: 'My Favorites', items: 'searchreplace | emoticons' }
        },
        menubar: 'favs file edit view insert format tools table',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }"
    cdkDropList
    [cdkDropListData]="[]"
    [cdkDropListDisabled]="preview() || !editable"
    (cdkDropListDropped)="drop($event)"
>
</editor>

@if (editableSignal() && (placeholder$ | async)) {
    <div class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-0"
        (click)="start()"
    >
        <pac-placeholder-add></pac-placeholder-add>
        <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.Document.Title' | translate: {Default: 'Document'} }}</span>
    </div>
}
